<template>
    <transition name="confirm-fade">
        <div class="confirm" v-show="showFlag" @click.stop>
            <div class="confirm-wrapper">
                <svg class="close-icon" aria-hidden="true" @click.stop="cancel"><use xlink:href="#icon-close"></use></svg>

                <div class="confirm-content">
                    <p class="title">{{ title }}</p>
                    <p class="text" v-if="text">{{ text }}</p>
                    <p class="text" v-if="html" v-html="html"></p>
                    <div class="operate" ref="operate">
                        <div @click="cancel" class="operate-btn left" v-if="!isAlert">{{ cancelBtnText }}</div>
                        <div @click="confirm" class="operate-btn">{{ confirmBtnText }}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
export default {
    props: {
        isAlert: {
            type: Boolean,
            default: false
        },
        //标题
        title: {
            type: String,
            default: '提示'
        },
        //副文字
        text: {
            type: String,
            default: ''
        },
        //html代码替代纯文字
        html: {
            type: String,
            default: ''
        },
        confirmBtnText: {
            type: String,
            default: '确定'
        },
        cancelBtnText: {
            type: String,
            default: '取消'
        },

    },
    data() {
        return {
            showFlag: false,
            //载荷（需要回传的data）
            payload:''
        }
    },
    methods: {
        show(payload) {
            this.payload = payload
            this.showFlag = true
        },
        hide() {
            this.showFlag = false
        },
        confirm() {
            this.hide()
            this.$emit('confirm',this.payload)
        },
        cancel() {
            this.hide()
            this.$emit('cancel',this.payload)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/main.styl'
.confirm {
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    z-index 9999
    background-color rgba(0, 0, 0, 0.5)
    &.confirm-fade-enter-active {
        animation confirm-fadein 0.3s
        .confirm-content {
            animation confirm-zoom 0.3s
        }
    }
    .confirm-wrapper {
        width vw(300)
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        background-color grayF
        border-radius 10px
        padding-top 10px
        .confirm-content {
            width 100%
            border-radius 10px
            .title {
                padding 10px 15px 0 15px
                line-height 20px
                text-align center
                font-size word16
            }
            .text {
                padding 15px 20px 10px 20px
                line-height 25px
                text-align center
                font-size word14
                color gray9
                >>> .stress{
                    color main-color
                }
            }
            .operate {
                width 70%
                margin auto
                display flex
                justify-content center
                text-align center
                font-size word14
                border-top 1px solid #f8f8f8
                .operate-btn {
                    flex 0 0 90px
                    line-height 25px
                    padding 5px 0
                    margin 10px 10px
                    border 1px solid main-color
                    border-radius 25px
                    color grayF
                    background-color main-color
                    &.left {
                        background-color grayF
                        color main-color
                    }
                }
            }
        }
        .close-icon {
            position absolute
            top 10px
            right 10px
            width 10px
            height 10px
            overflow hidden
            fill gray9
        }
    }
}

@keyframes confirm-fadein
    0%
        opacity: 0
    100%
        opacity: 1

@keyframes confirm-zoom
    0%
        transform: scale(0)
    50%
        transform: scale(1.1)
    100%
        transform: scale(1)
</style>
